import Vue from 'vue'
import VueRouter from 'vue-router'

//解决重复点击报错bug
const VueRouterPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(to) {
    return VueRouterPush.call(this, to).catch(err => err);
}
const VueRouterReplace = VueRouter.prototype.replace;
VueRouter.prototype.replace = function push(to) {
    return VueRouterReplace.call(this, to).catch(err => err);
}
Vue.use(VueRouter);

//定义路由规则
const routes = [
    {
        path: '/',
        redirect: '/login'
    },
    {
        path:'/user',
        component: () => import('@/views/user/index'),
        children:[
            {
                path:'',
                redirect:'/user/list'
            },
            {
                path:'list',
                component: () => import('@/views/user/ListUser'),
            },
            {
                path:'add',
                component: () => import('@/views/user/add'),
            }
        ]
    },
    {
        path: '/my/:id/:name',
        name: 'My',
        component: () => import('@/views/My.vue'),
        props: true
    },
    {
        path: '/login',
        name: 'Login',
        component: () => import('@/views/Login.vue'),
        meta:{
            title:'登录',
        }
    },
    {
        path: '/home',
        name: 'Home',
        component: () => import('@/views/home/HomeIndex.vue'),//懒加载
        meta: {
            isAuth: true,
            title: '首页',
            role: ['admin','user','vip']
        },
        children: [
            //  /home/HomeA
            { path: 'HomeA', name: 'HomeA', component: () => import('@/views/home/HomeA.vue') },
            //  /home/HomeB
            { path: 'HomeB/:id/:name', name: 'HomeB', component: () => import('@/views/home/HomeB.vue') },
            //  /home/HomeC
            {
                path: 'homeC',
                name: 'CC',
                component: () => import('@/views/home/HomeC.vue'),
                //第一种写法，值为对象，该对象的所有key-value都会以props的形式传给HomeC组件
                //props: { id: '6', 'name': '小彭' }
                //第二种写法  动态参数  params
                //若布尔值为true，则把路由中的params参数，以props的形式传给HomeC组件
                // props:true
                //第三种写法，值为函数
                props($route) {
                    return {
                        id: $route.params.id,
                        name: $route.params.name
                    }
                }
            },
        ]
    },
]


//定义路由对象
const router = new VueRouter({
    mode: 'history',
    routes
})

//全局路由守卫
//to ：到那个组件   from:启始组件
router.beforeEach((to, from, next) => {
    // 如果目标路径与当前路径相同，则直接调用 next() 而不做任何事情
    console.log('to', to.path);
    const userRole = 'vip'
    // 检查路由是否需要认证
    if (to.matched.some(record => record.meta.isAuth)) {
        // 检查用户角色是否满足路由要求
        if (to.meta.isAuth && !to.meta.role.includes(userRole)) {
            // 如果用户角色不是管理员，则重定向到登录页面
            next({ name: 'Login' });
        } else {
            // 用户角色匹配，允许访问
            document.title = to.meta.title || '默认标题';
            next();
        }
    } else {
        // 不需要认证的路由，直接允许访问
        document.title = to.meta.title || '默认标题';
        next();
        
    }

});

export default router;